<template>
    <div v-loading="loading">
        <el-form ref="form" :disabled="view" :model="form" :rules="rules" label-width="160px" label-suffix="：">
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="上级分类" prop="pid">
                <div style="line-height: 1;">
                    <treeselect
                        v-model="form.pid"
                        :disabled="view"
                        :options="categoryOptions"
                        :default-expand-level="1"
                        placeholder="请选择"
                    />
                </div>
            </el-form-item>
            <el-form-item label="封面图" prop="cover">
                <ImageUpload :url.sync="form.cover" :width="80" :height="80" />
            </el-form-item>
            <el-form-item label="普通店铺分佣比例" prop="normal_rate">
                <el-input-number v-model="form.normal_rate" :step="1" :min="0" :max="100" step-strictly controls-position="right" />
                <span class="form-last-text">0 ~ 100%</span>
            </el-form-item>
            <el-form-item label="自营店铺分佣比例" prop="self_rate">
                <el-input-number v-model="form.self_rate" :step="1" :min="0" :max="100" step-strictly controls-position="right" />
                <span class="form-last-text">0 ~ 100%</span>
            </el-form-item>
            <el-form-item label="权重排序" prop="weigh">
                <el-input-number v-model="form.weigh" :step="1" :min="0" step-strictly controls-position="right" />
                <span class="form-last-text">权重越大，排序越靠前</span>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    props: {
        id: {
            type: [Number, String],
            default: ''
        },
        view: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            loading: false,
            categoryOptions: [],
            form: {
                id: this.id,
                pid: null,
                name: '',
                normal_rate: '',
                self_rate: '',
                cover: '',
                weigh: '',
                status: 1
            },
            rules: {
                nickname: [{ required: true, message: '请完善信息', trigger: 'blur' }],
                name: [{ required: true, message: '请完善信息', trigger: 'blur' }],
                email: [{ required: true, message: '请完善信息', trigger: 'blur' }],
                mobile: [{ required: true, message: '请完善信息', trigger: 'blur' }]
            }
        }
    },
    mounted() {
        // 编辑
        if (this.form.id != '') {
            this.getInfo()
        }
        this.getCategory()
    },
    methods: {
        getCategory() {
            this.$api.post('product/search/business-classify-filter').then(res => {
                this.categoryOptions = res.data.data
            })
        },
        getInfo() {
            this.loading = true
            this.$api.post('product/business-classify/detail', { id: this.form.id }).then(res => {
                this.loading = false
                const data = res.data.data
                if (!data.pid) {
                    data.pid = null // 避免为空字符串的时候，treeselect显示unknown的问题
                }
                this.form = Object.assign(this.form, data)
            })
        },
        submit(callback) {
            if (this.form.id == '') {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.$api.post('product/business-classify/create', this.form).then(() => {
                            this.$message.success({
                                message: '新增成功',
                                center: true
                            })
                            callback && callback()
                        })
                    }
                })
            } else {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        this.$api.post('product/business-classify/update', this.form).then(() => {
                            this.$message.success({
                                message: '编辑成功',
                                center: true
                            })
                            callback && callback()
                        })
                    }
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    // scss
</style>
